<template>
  <div class="Hello">
    <el-dialog title="新增用户信息" :visible.sync="dialogAdd.show">
      <el-form :model="formData" ref="formdong" label-width="100px" :rules="formrules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="formData.phone" maxlength="11" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入用户邮箱"></el-input>
        </el-form-item>
        <el-form-item label="用户权限" prop="role">
          <el-input v-model="formData.role" maxlength="1" placeholder="请输入用户权限"></el-input>
        </el-form-item>
      </el-form>
      <!-- <div style="margin-top:10px">
                <el-radio v-model="userPriv" label="admin">管理员</el-radio>
                <el-radio v-model="userPriv" label="car_owner">车主</el-radio>
                <el-radio v-model="userPriv" label="user">普通用户</el-radio>
            </div> -->

      <!-- <span slot="footer" class="dialog-footer">
				<el-button @click="addUserVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span> -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <!-- <el-button type="primary" @click="dialogFormAdd('formdong')">确定</el-button> -->
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button type="primary" @click="reset">清空</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//import tableRouter from '@/router/modules/table';
import { sendcreate } from '@/api/form'
export default {
  props: {
    dialogAdd: Object
  },
  data () {
    return {
      formData: {
        username: '',
        password: '',
        phone: '',
        email: '',
        role: ''
      },
      formrules: {
        username: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }],

        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须同时包含数字与字母,且长度为 6-20位' }],


        phone: [{
          required: true,
          type: 'string',
          message: '请输入用户手机号',
          trigger: 'blur'
        }],
        email: [{ required: true, message: "邮箱不能为空！", trigger: "blur" },
        { type: "email", message: "请输入有效的邮箱", trigger: ["blur", "change"] }],
        role: [{
          required: true,
          message: "用户权限不能为空！",
          trigger: "blur"
        }],
      }
    }
  },
  methods: {
    dialogFormAdd (formdong) {
      this.dialogAdd.show = false;
    },
    cancel () {
      this.dialogAdd.show = false;
      this.resetForm();
    },
    submit () {
      sendcreate(this.formData).then(response => {
        // 处理成功的响应
        this.$message('user created successfully!')
      }).catch(error => {
        // 处理错误的响应
        this.$message.error('Failed to create user')
      })
      // this.resetForm();
    },
    reset () {
      this.resetForm();
    },
    resetForm () {
      this.$refs.formdong.resetFields();
    }
  }
}
</script>

<style scoped></style>
